{# On �tend notre layout #}
{% extends "::base.html.twig" %}

{% block title %} {{ event.evtTitle }} attendent un heureux &eacute;v&eacute;nement !{% endblock %}
{% block description %}Venez parier sur la naissance de leur futur enfant !{% endblock %}

{# Dans notre layout, il faut d�finir le block body #}
{% block bundleContent %}

    {% block content %}

	<!-- BEGIN CONTENT WRAPPER -->
	<div id="content-wrapper" class="content-wrapper">
		<div class="container">
			<div class="clearfix">
						
				{% if event.evtActualDate is null %}
					{% include "BmbEventBundle:Event:participate_opened_event_header.html.twig" %}
				{% else %}
					{% include "BmbEventBundle:Event:participate_closed_event_header.html.twig" %}
				{% endif %}
				
				<div class="grid_12">
				  <div id="calendar" class="calendar">
				  </div>
				</div>
			<!-- <div class="hr"></div> -->
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
		  $('#calendar').fullCalendar({
				lang: 'fr',
				defaultDate: '{{event.evtPlannedDate|date("Y-m-d")}}',
				aspectRatio: 2,
				header: {
					left: '',
					center: 'prev,title,next',
					right: ''
				},
				eventRender: function(event, element) {
					//element.attr('title', event.title);
					//element.append('<div>' + event.name + '<br />' + event.date + '<br />' + event.gender + '<br />' + event.weight + '<br />' + event.size + '</div>');
				},
				eventMouseover: function(event, domEvent) {
					//$(this).append(event.popup);
					var tooltip = '<div class="tooltipevent" style="padding: 10px 10px 10px 10px;color:#FFFFFF;position:absolute;z-index:10001;font-size: 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color:'+ event.color +';">' + event.popup + '</div>';
					$("body").append(tooltip);
					$(this).mouseover(function(e) {
						$(this).css('z-index', 10000);
						$('.tooltipevent').fadeIn('500');
						$('.tooltipevent').fadeTo('10', 1.9);
					}).mousemove(function(e) {
						$('.tooltipevent').css('top', e.pageY + 10);
						$('.tooltipevent').css('left', e.pageX + 20);
					});
				},
				eventMouseout: function(event, domEvent) {
					$(this).css('z-index', 8);
					$('.tooltipevent').remove();
				},
				eventSources: [{
					events: [
						{
						title: 'Date prévue',
						start: '{{event.evtPlannedDate|date("Y-m-d")}}',
						popup: 'Date prévue : {{event.evtPlannedDate|date("d/m/Y")}}',
						date: 'Date : {{event.evtPlannedDate|date("d/m/Y")}}',
						color: '#fc8a58',
						textColor: 'white'
						},
						{% if event.evtActualDate != null %}
							{
							title: 'Naissance',
							start: '{{event.evtActualDate|date("Y-m-d")}}',
							popup: 'Résultats<br />Nom : {{ event.evtName }}<br />Date : {{event.evtActualDate|date("d/m/Y")}}<br />Sexe : {% if event.evtGender == "f" %}Fille{% else %}Garçon{% endif %}<br />Poids : {{ event.evtActualWeight }} kg<br />Taille : {{ event.evtActualSize }} cm',
							name: 'Nom : {{ event.evtName }}',
							date: 'Date : {{event.evtActualDate|date("d/m/Y")}}',
							gender: 'Sexe : {{ event.evtGender }}',
							weight: 'Poids : {{ event.evtActualWeight }} kg',
							size: 'Taille : {{ event.evtActualSize }} cm',
							color: '#c2d018',
							textColor: 'white'
							},
						{% endif %}
						{% for vote in votes %}
							{
							title: '{{ vote.votName }}',
							start: '{{vote.votDate|date("Y-m-d")}}',
							popup: 'Nom : {{ vote.votName }}<br />Date : {{vote.votDate|date("d/m/Y")}}<br />Sexe : {% if vote.votGender == "f" %}Fille{% else %}Garçon{% endif %}<br />Poids : {{ vote.votWeight }} kg<br />Taille : {{ vote.votSize }} cm',
							name: 'Nom : {{ vote.votName }}',
							date: 'Date : {{vote.votDate|date("d/m/Y")}}',
							gender: 'Sexe : {{ vote.votGender }}',
							weight: 'Poids : {{ vote.votWeight }} kg',
							size: 'Taille : {{ vote.votSize }} cm',
							color: '{% if vote.votGender == "m" %}#70b3d0{% else %}#F9C0B5{% endif %}',
							textColor: 'white'
							},
						{% endfor %}
					]
				}]
		  });
		  
		  $('#bmb_eventbundle_vote_votDate').datepicker({lang: 'fr', defaultDate: '{{event.evtPlannedDate|date("d/m/Y")}}'});
		  $('#bmb_eventbundle_vote_votDate').datepicker("option", "dateFormat", "dd/mm/yy");
		});
	</script>

	{% endblock %}

{% endblock %}